<script setup lang="ts" name="SlotMachine3">
import img01 from '@/assets/lottery/slotMachine/slotMachine3/1.png'
import img02 from '@/assets/lottery/slotMachine/slotMachine3/2.png'
import img03 from '@/assets/lottery/slotMachine/slotMachine3/3.png'
import img04 from '@/assets/lottery/slotMachine/slotMachine3/4.png'
import img05 from '@/assets/lottery/slotMachine/slotMachine3/5.png'
import img06 from '@/assets/lottery/slotMachine/slotMachine3/6.png'
import img07 from '@/assets/lottery/slotMachine/slotMachine3/7.png'
import img08 from '@/assets/lottery/slotMachine/slotMachine3/8.png'
import img09 from '@/assets/lottery/slotMachine/slotMachine3/9.png'
import img10 from '@/assets/lottery/slotMachine/slotMachine3/10.png'
import img11 from '@/assets/lottery/slotMachine/slotMachine3/11.png'
import img12 from '@/assets/lottery/slotMachine/slotMachine3/12.png'
import img13 from '@/assets/lottery/slotMachine/slotMachine3/13.png'
import img14 from '@/assets/lottery/slotMachine/slotMachine3/14.png'
import img15 from '@/assets/lottery/slotMachine/slotMachine3/15.png'
import img16 from '@/assets/lottery/slotMachine/slotMachine3/16.png'
import { lottery } from '@/api/lottery'
const SlotMachineRef = ref(null)

const initInfo = ref({
  blocks: [
    { padding: '0px' }
  ],
  prizes: [
    { borderRadius: '0', imgs: [{ src: img01, top: '0', width: '100%' }] },
    { borderRadius: '0', imgs: [{ src: img02, top: '0', width: '100%' }] },
    { borderRadius: '0', imgs: [{ src: img03, top: '0', width: '100%' }] },
    { borderRadius: '0', imgs: [{ src: img04, top: '0', width: '100%' }] },
    { borderRadius: '0', imgs: [{ src: img05, top: '0', width: '100%' }] },
    { borderRadius: '0', imgs: [{ src: img06, top: '0', width: '100%' }] },
    { borderRadius: '0', imgs: [{ src: img07, top: '0', width: '100%' }] },
    { borderRadius: '0', imgs: [{ src: img08, top: '0', width: '100%' }] },
    { borderRadius: '0', imgs: [{ src: img09, top: '0', width: '100%' }] },
    { borderRadius: '0', imgs: [{ src: img10, top: '0', width: '100%' }] },
    { borderRadius: '0', imgs: [{ src: img11, top: '0', width: '100%' }] },
    { borderRadius: '0', imgs: [{ src: img12, top: '0', width: '100%' }] },
    { borderRadius: '0', imgs: [{ src: img13, top: '0', width: '100%' }] },
    { borderRadius: '0', imgs: [{ src: img14, top: '0', width: '100%' }] },
    { borderRadius: '0', imgs: [{ src: img15, top: '0', width: '100%' }] },
    { borderRadius: '0', imgs: [{ src: img16, top: '0', width: '100%' }] }
  ],
  slots: [
    { direction: 1 }
  ],
  defaultConfig: {
    rowSpacing: '4px',
    colSpacing: '4px',
    speed: 30,
    accelerationTime: 5000,
    decelerationTime: 5000,
    mode: 'horizontal'
  }
})

// 点击抽奖按钮会触发star回调
const startCallback = () => {
  // 调用抽奖组件的play方法开始游戏
  SlotMachineRef.value.play()
  // 模拟调用接口异步抽奖
  lottery.result({ count: initInfo.value.prizes.length - 1, column: initInfo.value.slots.length }, { config: { showLoading: false, mockEnable: true } }).then((res: any) => {
    if (res && res.code === 200) {
      // 调用stop停止旋转并传递中奖索引
      SlotMachineRef.value.stop(res.data.index)
    }
  })
}

// 抽奖结束会触发end回调
const endCallback = (prize) => {
  console.log(prize, '抽奖结果回调')
}
</script>

<template>
  <el-card shadow="hover">
    <template #header>
      <div class="card-header">
        <span>老虎机-横向老虎机</span>
      </div>
    </template>
    <div class="slot-machine-pane">
      <div class="slot-machine-content">
        <SlotMachine ref="SlotMachineRef" width="25vw" height="10vw" :defaultConfig="initInfo.defaultConfig" :prizes="initInfo.prizes" :slots="initInfo.slots" @end="endCallback"></SlotMachine>
      </div>
      <div class="slot-machine-start" @click="startCallback">开始抽奖</div>
    </div>
  </el-card>
</template>

<style scoped lang="scss">
.el-card {
  :deep(.el-card__body) {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2d2d2d;
    background-image: url('@/assets/lottery/bg.svg');
    background-attachment: fixed;
  }
}

.slot-machine-pane {
  position: relative;
  width: 25vw;
  height: 15.8854vw;
  margin: 1.671vw auto 1.669vw;
  overflow: hidden;

  .slot-machine-content{
    position: absolute;
    top: 3vw;
    left: 0;
    z-index: 0;
    width: 100%;
    overflow: hidden;

    &::before{
      position: absolute;
      top: 0;
      left: 60%;
      z-index: 10;
      width: 3px;
      height: 6.4vw;
      background-color: #aeaa4f;
      content: ''
    }
  }

  .slot-machine-start{
    position: absolute;
    bottom: 1vw;
    left: 7.5vw;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 9.8958vw;
    height: 2.2917vw;
    color: #ffffff;
    font-weight: bold;
    font-size: 18px;
    background-image: url('@/assets/lottery/slotMachine/slotMachine2/btn.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
  }
}
</style>
